/* 设置整个页面的背景样式 */
body {
  /* 使用指定路径的图片作为背景 */
  background-image: url('./assets/wallhaven-m3m7y1.png');
  /* 将背景图片位置居中 */
  background-position: center;
  /* 背景图片不重复显示 */
  background-repeat: no-repeat;
  /* 让背景图片铺满整个页面 */
  background-size: cover;
  /* 当页面滚动时，背景图片固定不动 */
  background-attachment: fixed;
  /* 设置页面边距为0，以消除默认边距 */
  margin: 0;

  /* 可选样式，使用 Flex 布局将元素水平垂直居中 */
  display: flex;
  justify-content: center;
  align-items: center;
  /* 设置最小高度为视口高度，确保内容在页面中垂直居中 */
  min-height: 100vh;
}

/* 时钟容器样式 */
.clock-container {
  /* 添加背景模糊效果 */
  backdrop-filter: blur(5px);
  /* 设置边框圆角 */
  border-radius: 10px;
  /* 宽度铺满整个视口宽度 */
  width: 100vw;
  /* 上下内边距为10像素，左右内边距为0 */
  padding: 10px 0;
}

/* 时钟文本样式 */
.clock {
  /* 文本颜色为白色 */
  color: white;
  /* 设置字体大小 */
  font-size: 6rem;
  /* 设置字体粗细 */
  font-weight: bold;
  /* 设置字体族为等宽字体 */
  font-family: monospace;
  /* 文本居中显示 */
  text-align: center;
  /* 添加文本阴影效果 */
  text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.76);
}
